<template>
  <view class="property-container">
    <!-- 缴费服务区 -->
    <view class="section payment-section">
      <view class="section-title">生活缴费</view>
      <view class="grid-container">
        <view class="grid-item" v-for="(item, index) in paymentServices" 
              :key="index" @tap="navigateToPayment(item)">
          <image :src="item.icon"></image>
          <text>{{ item.name }}</text>
          <text class="status" v-if="item.status">{{ item.status }}</text>
        </view>
      </view>
    </view>

    <!-- 物业服务区 -->
    <view class="section service-section">
      <view class="section-title">物业服务</view>
      <view class="grid-container">
        <view class="grid-item" v-for="(item, index) in propertyServices" 
              :key="index" @tap="navigateToService(item)">
          <image :src="item.icon"></image>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 生活服务区 -->
    <view class="section life-section">
      <view class="section-title">生活服务</view>
      <view class="grid-container">
        <view class="grid-item" v-for="(item, index) in lifeServices" 
              :key="index" @tap="navigateToService(item)">
          <image :src="item.icon"></image>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      paymentServices: [
        {
          name: '水电费',
          icon: '/static/property/utility.png',
          path: '/pages/property/payment',
          status: '待缴费'
        },
        {
          name: '物业费',
          icon: '/static/property/property-fee.png',
          path: '/pages/property/management-fee'
        },
        {
          name: '停车费',
          icon: '/static/property/parking.png',
          path: '/pages/property/parking-fee'
        },
        {
          name: '合同费',
          icon: '/static/property/contract.png',
          path: '/pages/property/contract-fee'
        }
      ],
      propertyServices: [
        {
          name: '报事报修',
          icon: '/static/property/repair.png',
          path: '/pages/property/repair'
        },
        {
          name: '装修报备',
          icon: '/static/property/renovation.png',
          path: '/pages/property/renovation'
        },
        {
          name: '访客通行',
          icon: '/static/property/visitor.png',
          path: '/pages/property/visitor'
        },
        {
          name: '物业打分',
          icon: '/static/property/complaint.png',
          path: '/pages/property/complaint'
        },
        {
          name: '预约服务',
          icon: '/static/property/venue.png',
          path: '/pages/property/venue'
        },
        {
          name: '物品放行',
          icon: '/static/property/release.png',
          path: '/pages/property/release'
        }
      ],
      lifeServices: [
        {
          name: '家电维修',
          icon: '/static/property/appliance-repair.png',
          path: '/pages/property/appliance-repair'
        },
        {
          name: '门窗维护',
          icon: '/static/property/window-maintenance.png',
          path: '/pages/property/window-maintenance'
        },
        {
          name: '开锁换锁',
          icon: '/static/property/locksmith.png',
          path: '/pages/property/locksmith'
        },
        {
          name: '防水补漏',
          icon: '/static/property/waterproof.png',
          path: '/pages/property/waterproof'
        },
        {
          name: '家电安装',
          icon: '/static/property/installation.png',
          path: '/pages/property/appliance-installation'
        }
      ]
    }
  },
  methods: {
    navigateToPayment(item) {
      uni.navigateTo({
        url: item.path
      })
    },
    navigateToService(item) {
      uni.navigateTo({
        url: item.path
      })
    },
    async checkPaymentStatus() {
      try {
        const res = await this.$api.getPaymentStatus()
        // 更新缴费状态
        this.updatePaymentStatus(res.data)
      } catch (error) {
        uni.showToast({
          title: '获取缴费状态失败',
          icon: 'none'
        })
      }
    },
    updatePaymentStatus(statusData) {
      this.paymentServices = this.paymentServices.map(item => {
        const status = statusData[item.name]
        return {
          ...item,
          status: status ? '待缴费' : ''
        }
      })
    }
  }
}
</script>

<style lang="scss">
.property-container {
  padding: 20rpx;
  background: #f5f5f5;
}

.section {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  image {
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 10rpx;
  }

  text {
    font-size: 26rpx;
    text-align: center;
  }

  .status {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    background: #ff4d4f;
    color: #fff;
    font-size: 20rpx;
    padding: 4rpx 8rpx;
    border-radius: 20rpx;
  }
}
</style> 